<template>
	<view>
		<view class="section section-2">
			<view class="table-container">
				<table border="0" cellspacing="0" cellpadding="0">
					<tr>
						<th style='width: 60px;' v-for="(value, key) in curChartsTab.map">
							{{value.name}}
						</th>
					</tr>
					<tr v-for="(item,index) in listMap[curChartsTab.type]">
						<td v-for="(value, key) in curChartsTab.map">
							{{item[key] == '' ? '/' : value.filter(item[key])}}
						</td>
					</tr>
				</table>
			</view>
		</view>
	</view>
</template>

<script>
	const nodeMap = {
		name: {
				name: '名称',
				filter: (val) => val
			},
			type: {
				name: '类型',
				filter: (val) => val ? val.substring(0, 10) : '-'
			},
			state: {
				name: '状态',
				filter: (val) => val == 1 ? '正常':'异常'
			},
	}

	import { deviceListApi } from '@/api/statistics.js'
	export default{
		onLoad(e) {
			this.project_id = e.project_id
			this.type = e.type
			if(this.type == 1){
				uni.setNavigationBarTitle({
					title: '安装设备列表'
				});
			}else if(this.type == 2){
				uni.setNavigationBarTitle({
					title: '异常设备列表'
				});
			}else{
				uni.setNavigationBarTitle({
					title: '布控球列表'
				});
			}
			this.deviceListApi()
		},
		data(){
			return{
				type:'',
				curChartsTab: {
					name: '关键节点',
					type: 'node',
					map: nodeMap,
				},
				project_id:'',
				listMap: {
					node: [],
				}
			}
		},
		methods:{
			async deviceListApi(){
				let j = await deviceListApi({
					project_id: this.project_id,
					type:this.type
				})
				if(j.data.code == 1){
					this.listMap.node = j.data.data
				}
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.section-2{
		width: 100%;
		.table-container{
			width: 100%;
			box-sizing: border-box;
			padding: 0 40rpx;
			padding-top: 25rpx;
			overflow-x: auto;
			table{
				table-layout:fixed;
				border-top: 1rpx solid #ebebeb;
				border-left: 1rpx solid #ebebeb;
				th{
					font-size: 26rpx;
					color: #3b3c40;
					text-align: left;
					word-break: keep-all;
					white-space: nowrap;
					background-color: #e2eefe;
					padding: 30rpx 60rpx;
					text-align: center;
					border-bottom: 1rpx solid #ebebeb;
					border-right: 1rpx solid #ebebeb;
				}
				td{
					
					font-size: 22rpx;
					color: #compare;
					// white-space: pre-line;  //合并空白符序列，但是保留换行符
					// word-wrap: break-word; //在长单词或+URL+地址内部进行换行
					// word-break: break-all; //允许在单词内换行
					// word-break: keep-all;
					// white-space: nowrap;
					text-align: left;
					padding-right: 20rpx;
					padding: 20rpx;
					border-bottom: 1rpx solid #ebebeb;
					border-right: 1rpx solid #ebebeb;
					text-align: center;
				}
			}
		}
	}
</style>
